import React,{Component} from 'react';
import {
    FlatList,
    Text,
    View,
    Image,
    TouchableHighlight,
    Dimensions,
    Button,
    TouchableOpacity,
} from 'react-native';
import {mainStyle} from '../../assets/css/mainCss';

const styles = {
    topWidth:{
        width: Dimensions.get('window').width,
    }
};

export class Header extends React.Component{

    renderLeftItem(){
        if (this.props.leftItem === undefined) return;
        return this.props.leftItem();
    }
    renderCenterItem(){
        if (this.props.titleItem === undefined) return;
        return this.props.titleItem();
    }
    renderRightItem(){
        if (this.props.rightItem === undefined) return;
        return this.props.rightItem();
    }
    render() {
        return (
            <View style={[mainStyle.headerStyle,styles.topWidth,{
                paddingVertical:12,
                flexDirection:'row',//横向排
                justifyContent:'space-between',//主轴对齐方式
                }]}>
                <View>
                    {this.renderLeftItem()}
                </View>
                <View>
                    {this.renderCenterItem()}
                </View>
                <View>
                    {this.renderRightItem()}
                </View>
            </View>
        );
    }
}
